$(function () {
    var dialog = "<div id = 'dialog' style='display: none; background-color: #D3F36C;'></div>";
    var check;
    var show = false;
    $("body").append(dialog);
    var file = "<div style='margin: 8px;'<form enctype='multipart/form-data'>" +
  	"<input name='file' type='file' id = 'avatar' name='file'/><button id='submit'>Завантажити</button></form></div>";
    var checkbox = "<div style='margin: 9px;'><input type='checkbox' id='playAll' name='playAll'><font size='3'> Програти все </font></div>";
    var iter = "<div style='margin: 10px;'><input type='text' id='iterCount' name='iterCount' size='12'><font size='3'> Вибрати ітерацію </font></div>";
    $("#dialog").append(file);
    $("#dialog").append(iter);
    $("#dialog").append(checkbox);
    $("#playAll").click(function () {
        if ($(this).is(':checked')) {
            $("#iterCount").attr("disabled", true);
            check = true;
        }
        else {
            $("#iterCount").attr("disabled", false);
            check = false;
        }
    });
    $("#dialog").append("<div style='position: absolute; left: 40%; bottom:0px;'><img src = '../menu/ui-lightness/footer.png' height=50 width=50></div>");

    $("#dialog").append("<div style='position: absolute; left: 5%; bottom: 0px;'><img src = '../menu/ui-lightness/footer.png' height=50 width=50></div>");

    $("#dialog").append("<div style='position: absolute; left: 75%; bottom: 0px;'><img src = '../menu/ui-lightness/footer.png' height=50 width=50></div>");

    // $("#dialog").prepend("<div style='position: absolute; left: 250; top: 40'><img src = '../menu/ui-lightness/zombie.png' height=100 width=100></div>");
    $("#submit").click(function () {
        var filename = $('input[type=file]').val();
        if (filename != "") {
            var file_data = $("#avatar").prop("files")[0];
            var form_data = new FormData();

            form_data.append("file", file_data);
            form_data.append("user_id", 123);
            //Creating an XMLHttpRequest and sending
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/Home/RecieveFile');
            xhr.send(form_data);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var answer = xhr.responseText;
                    window.mainParameter = JSON.parse(answer);
                }
            }
        }

    });
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            if (show) {
                show = false;
                $("#dialog").dialog("close");
                $("#dialog").hide();
            }
            else {
                show = true;
                $("#dialog").show();
                $("#dialog").dialog({
                    title: "Menu",
                    width: 400,
                    height: 290,
                    modal: true,
                    resizable: false,
                    buttons: [
				    {
				        text: 'OK',
				        click: function () {
				            show = false;
				            var iteration = $("#iterCount").val();
				            if (check) {
				                if (window.mainParameter != undefined) {
				                    main(window.mainParameter);
				                }
				                //main({ Iterations: [{ ClustersX: null, ClustersY: null, Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [287, 700], ClustersY: [462, 350], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [297, 710], ClustersY: [412, 340], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [1870, 720], ClustersY: [4202, 330], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 0, X: 550, Y: 500}]}] })
				            } else {
				                if (window.mainParameter != undefined) {
				                    ShowIteration(window.mainParameter, iteration);
				                }
				                //ShowIteration({ Iterations: [{ ClustersX: null, ClustersY: null, Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [287, 700], ClustersY: [462, 350], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [297, 710], ClustersY: [412, 340], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}] }, { ClustersX: [1870, 720], ClustersY: [4202, 330], Points: [{ Cluster: 0, X: 300, Y: 300 }, { Cluster: 0, X: 200, Y: 400 }, { Cluster: 0, X: 400, Y: 400 }, { Cluster: 1, X: 600, Y: 100 }, { Cluster: 1, X: 550, Y: 500}]}] }, iteration)
				            }
				            $(this).dialog("close");

				        }
				    },
				    {
				        text: 'Очистити',
				        click: function () {
				            $(this).dialog("close");
				            clearShit();
				            show = false;
				        }
				    }
				    ]
                });
                $(".ui-dialog-titlebar").hide();
            }
        }
    });
});